<!-- Simple User Cards -->
<section id="simple-user-cards" class="row">
    <div class="col-12">
        <h4 class="text-uppercase">Simple User Cards</h4>
        <p>A very basic simple user cards.</p>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-4.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Michelle Howard</h4>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-1.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Joseph Ryan</h4>
                    <h6 class="card-subtitle text-muted">Marketing Head</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-6.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Frances Butler</h4>
                    <h6 class="card-subtitle text-muted">Technical Lead</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-5.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Andrew Davis</h4>
                    <h6 class="card-subtitle text-muted">UI/UX Designer</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Simple User Cards -->
<!-- Simple User Cards with Border-->
<section id="simple-user-cards-with-border" class="row mt-2">
    <div class="col-12">
        <h4 class="text-uppercase">Simple User Cards with Border</h4>
        <p>Use color palette border class <code>border-color</code>, <code>border-lighten-*</code>.</p>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card border-teal border-lighten-2">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-4.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Michelle Howard</h4>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card border-pink border-lighten-2">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-1.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Joseph Ryan</h4>
                    <h6 class="card-subtitle text-muted">Marketing Head</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card border-blue border-lighten-2">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-6.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Frances Butler</h4>
                    <h6 class="card-subtitle text-muted">Technical Lead</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card border-amber border-lighten-2">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-5.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Andrew Davis</h4>
                    <h6 class="card-subtitle text-muted">UI/UX Designer</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Simple User Cards with Border-->
<!-- Simple User Cards with Shadow-->
<section id="user-cards-with-square-thumbnail" class="row mt-2">
    <div class="col-12">
        <h4 class="text-uppercase">Simple User Cards with Square Thumbnail</h4>
        <p>Use shadow helper class <code>box-shadow-*</code> to add show in cards.</p>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card box-shadow-1">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-4.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Michelle Howard</h4>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card box-shadow-2">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-1.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Joseph Ryan</h4>
                    <h6 class="card-subtitle text-muted">Marketing Head</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card box-shadow-3">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-6.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Frances Butler</h4>
                    <h6 class="card-subtitle text-muted">Technical Lead</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 col-12">
        <div class="card box-shadow-4">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-5.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Andrew Davis</h4>
                    <h6 class="card-subtitle text-muted">UI/UX Designer</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Simple User Card with Border-->
<!-- User Profile Cards -->
<section id="user-profile-cards" class="row mt-2">
    <div class="col-12">
        <h4 class="text-uppercase">User Profile Cards</h4>
        <p>User profile cards with border & shadow variant.</p>
    </div>
    <div class="col-xl-4 col-md-6 col-12">
        <div class="card">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-4.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Frances Butler</h4>
                    <h6 class="card-subtitle text-muted">Technical Lead</h6>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-danger mr-1"><i class="la la-plus"></i> Follow</button>
                    <button type="button" class="btn btn-primary mr-1"><i class="ft-user"></i> Profile</button>
                </div>
            </div>
            <div class="list-group list-group-flush">
                <a href="#" class="list-group-item"><i class="la la-briefcase"></i> Overview</a>
                <a href="#" class="list-group-item"><i class="ft-mail"></i> Email</a>
                <a href="#" class="list-group-item"><i class="ft-check-square"></i> Task</a>
                <a href="#" class="list-group-item"> <i class="ft-message-square"></i> Calender</a>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6 col-12">
        <div class="card card border-teal border-lighten-2">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-5.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Andrew Davis</h4>
                    <h6 class="card-subtitle text-muted">UI/UX Designer</h6>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-danger mr-1"><i class="la la-plus"></i> Follow</button>
                    <button type="button" class="btn btn-primary mr-1"><i class="ft-user"></i> Profile</button>
                </div>
            </div>
            <div class="list-group list-group-flush">
                <a href="#" class="list-group-item"><i class="la la-briefcase"></i> Overview</a>
                <a href="#" class="list-group-item"><i class="ft-mail"></i> Email</a>
                <a href="#" class="list-group-item"><i class="ft-check-square"></i> Task</a>
                <a href="#" class="list-group-item"> <i class="ft-message-square"></i> Calender</a>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6 col-12">
        <div class="card box-shadow-2">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-6.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Michelle Howard</h4>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="card-body">
                    <button type="button" class="btn btn-danger mr-1"><i class="la la-plus"></i> Follow</button>
                    <button type="button" class="btn btn-primary mr-1"><i class="ft-user"></i> Profile</button>
                </div>
            </div>
            <div class="list-group list-group-flush">
                <a href="#" class="list-group-item"><i class="la la-briefcase"></i> Overview</a>
                <a href="#" class="list-group-item"><i class="ft-mail"></i> Email</a>
                <a href="#" class="list-group-item"><i class="ft-check-square"></i> Task</a>
                <a href="#" class="list-group-item"> <i class="ft-message-square"></i> Calender</a>
            </div>
        </div>
    </div>
</section>
<!--/ User Profile Cards -->
<!-- User Profile Cards with Stats -->
<section id="user-profile-cards-with-stats" class="row mt-2">
    <div class="col-12">
        <h4 class="text-uppercase">User Profile Cards with Stats</h4>
        <p>User profile cards with Stats in border & shadow variant.</p>
    </div>
    <div class="col-xl-4 col-md-6 col-12">
        <div class="card profile-card-with-stats">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-8.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Linda Holland</h4>
                    <ul class="list-inline list-inline-pipe">
                        <li>@lindah</li>
                        <li>domain.com</li>
                    </ul>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="btn-group" role="group" aria-label="Profile example">
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i class="la la-bell-o"></i><span>12+</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i class="la la-heart-o"></i><span>25</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i class="la la-briefcase"></i><span>5</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i class="ft-mail"></i><span>75+</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info"><span class="ladda-label"><i class="la la-dashcube"></i><span>125</span></span><span class="ladda-spinner"></span></button>
                </div>
                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet, autem imperdiet et nam. Nullam labores id quo, sed ei.</p>
                    <button type="button" class="btn btn-outline-danger btn-md mr-1"><i class="la la-plus"></i> Follow</button>
                    <button type="button" class="btn btn-outline-primary btn-md mr-1"><i class="ft-user"></i> Profile</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6 col-12">
        <div class="card profile-card-with-stats border-teal border-lighten-2">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-7.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Philip Garrett</h4>
                    <ul class="list-inline list-inline-pipe">
                        <li>@philipg</li>
                        <li>domain.com</li>
                    </ul>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="btn-group" role="group" aria-label="Profile example">
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span class="ladda-label"><i class="la la-bell-o"></i><span>12+</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span class="ladda-label"><i class="la la-heart-o"></i><span>25</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span class="ladda-label"><i class="la la-briefcase"></i><span>5</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span class="ladda-label"><i class="ft-mail"></i><span>75+</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-round"><span class="ladda-label"><i class="la la-dashcube"></i><span>125</span></span><span class="ladda-spinner"></span></button>
                </div>
                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet, autem imperdiet et nam. Nullam labores id quo, sed ei.</p>
                    <button type="button" class="btn btn-outline-danger btn-md btn-round mr-1"><i class="la la-plus"></i> Follow</button>
                    <button type="button" class="btn btn-outline-primary btn-md btn-round mr-1"><i class="ft-user"></i> Profile</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6 col-12">
        <div class="card profile-card-with-stats box-shadow-2">
            <div class="text-center">
                <div class="card-body">
                    <img src="../../../app-assets/images/portrait/medium/avatar-m-10.png" class="rounded-circle  height-150" alt="Card image">
                </div>
                <div class="card-body">
                    <h4 class="card-title">Christine Wood</h4>
                    <ul class="list-inline list-inline-pipe">
                        <li>@christine</li>
                        <li>domain.com</li>
                    </ul>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="btn-group" role="group" aria-label="Profile example">
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span class="ladda-label"><i class="la la-bell-o"></i><span>12+</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span class="ladda-label"><i class="la la-heart-o"></i><span>25</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span class="ladda-label"><i class="la la-briefcase"></i><span>5</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span class="ladda-label"><i class="ft-mail"></i><span>75+</span></span><span class="ladda-spinner"></span></button>
                    <button type="button" class="btn btn-float box-shadow-0 btn-outline-info btn-square"><span class="ladda-label"><i class="la la-dashcube"></i><span>125</span></span><span class="ladda-spinner"></span></button>
                </div>
                <div class="card-body">
                    <p>Lorem ipsum dolor sit amet, autem imperdiet et nam. Nullam labores id quo, sed ei.</p>
                    <button type="button" class="btn btn-outline-danger btn-md btn-square mr-1"><i class="la la-plus"></i> Follow</button>
                    <button type="button" class="btn btn-outline-primary btn-md btn-square mr-1"><i class="ft-user"></i> Profile</button>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- User Profile Cards with Stats -->
<!-- User Profile Cards with Cover Image -->
<section id="user-profile-cards-with-cover-image" class="row mt-2">
    <div class="col-12">
        <h4 class="text-uppercase">User Profile Cards with Cover Image</h4>
        <p>User profile cards with Cover Image in border & shadow variant.</p>
    </div>
    <div class="col-xl-4 col-md-6 col-12">
        <div class="card profile-card-with-cover">
            <!--<img class="card-img-top img-fluid" src="../../../app-assets/images/carousel/18.jpg" alt="Card cover image">-->
            <div class="card-img-top img-fluid bg-cover height-200" style="background: url('../../../app-assets/images/carousel/18.jpg');"></div>
            <div class="card-profile-image">
                <img src="../../../app-assets/images/portrait/small/avatar-s-4.png" class="rounded-circle img-border box-shadow-1" alt="Card image">
            </div>
            <div class="profile-card-with-cover-content text-center">
                <div class="card-body">
                    <h4 class="card-title">Linda Holland</h4>
                    <ul class="list-inline list-inline-pipe">
                        <li>@lindah</li>
                        <li>domain.com</li>
                    </ul>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-github"><span class="la la-github font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6 col-12">
        <div class="card profile-card-with-cover border-teal border-lighten-2">
            <!--<img class="card-img-top img-fluid" src="../../../app-assets/images/carousel/16.jpg" alt="Card cover image">-->
            <div class="card-img-top img-fluid bg-cover height-200" style="background: url('../../../app-assets/images/carousel/16.jpg');"></div>
            <div class="card-profile-image">
                <img src="../../../app-assets/images/portrait/small/avatar-s-9.png" class="rounded-circle img-border" alt="Card image">
            </div>
            <div class="profile-card-with-cover-content text-center">
                <div class="card-body">
                    <h4 class="card-title">Philip Garrett</h4>
                    <ul class="list-inline list-inline-pipe">
                        <li>@philip</li>
                        <li>domain.com</li>
                    </ul>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-github"><span class="la la-github font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-4 col-md-6 col-12">
        <div class="card profile-card-with-cover box-shadow-2">
            <div class="card-img-top img-fluid bg-cover height-200" style="background: url('../../../app-assets/images/carousel/17.jpg');"></div>
            <div class="card-profile-image">
                <img src="../../../app-assets/images/portrait/small/avatar-s-8.png" class="rounded-circle img-border box-shadow-4" alt="Card image">
            </div>
            <div class="profile-card-with-cover-content text-center">
                <div class="card-body">
                    <h4 class="card-title">Christine Wood</h4>
                    <ul class="list-inline list-inline-pipe">
                        <li>@christine</li>
                        <li>domain.com</li>
                    </ul>
                    <h6 class="card-subtitle text-muted">Managing Director</h6>
                </div>
                <div class="text-center">
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                    <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                    <a href="#" class="btn btn-social-icon mb-1 btn-outline-github"><span class="la la-github font-medium-4"></span></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/ User Profile Cards with Cover Image -->
